<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>target</title>
    <style>
        #div1{ width: 50vw; height:50vh; background: #f00;}
        #div1:target{background: #00f; transition: all .6s;}
        p:first-line{ font-size: 30px;}
        p:first-letter{color:#f00;}
        span:first-line{ font-size: 30px;}
        span:first-letter{color:#f00;}
        ul li:first-child{border: 1px solid #f00;}
        ul:nth-last-child(1) li:nth-child(n){
            background: #00f;
        }
        ul li:nth-child(2n){
            background: #f0f;
        }
        ul:nth-last-child(1) li:nth-child(3n){
            background: #ff0;
        }
        ul:nth-last-child(1) li:nth-last-child(-4n+10){
            background: #ccc;
        }
    </style>
</head>
<body>
    <a href="#div1">aaaaa</a>
    <div id='div1'></div>
    <p>asdfadfasd<br>1324e3252345</p>
    <span>asdfadfasd<br>1324e3252345</span>
    <ul>
        <li class="l1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
        <li>列表7</li>
        <li>列表8</li>
        <li>列表9</li>
        <li>列表10</li>
    </ul>
</body>
</html>